<template>
  <div class="a1">
    <video src="../assets/imgs/imgdh/mailang.mp4" autoplay muted="muted" loop></video>
		<div class="a2">
      <div class="b1">
        <div class="c1"></div>
      </div>
      <div class="b2">
        <h1>风中的麦浪</h1>
        <p>
          爱过的地方<br/>
          当微风带着收获的味道<br/>
          吹向我脸庞<br/>
          想起你轻柔的话语<br/>
          曾打湿我眼眶<br/>
          嗯...啦...嗯...啦...<br/>
          我们曾在田野上歌唱<br/>
          在冬季盼望<br/>
          却没能等到阳光下
        </p>
      </div>
      <div class="b3">
        <audio id="yin" controls="controls">
          <source src="../assets/imgs/imgdh/mmm1.mp3" type="audio/mpeg" />
        </audio>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'IndexWS',
  data () {
    return {
      
    }
  },
  mounted() {
    
  },
  methods: {
    one(){
      var yin=document.getElementById("yin");
      yin.src="../assets/imgs/imgdh/mmm1.mp3";
    }
    ,three(){
      var yin=document.getElementById("yin");
      yin.src="../assets/imgs/imgdh/mmm3.mp3";
    }
  }
}
</script>
<style scoped="scoped">
@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;}
.a1{
	width:100%;
	height:100%;
	overflow:hidden;
	}
.a1 video{
	position:absolute;
	top:50%;
	left:50%;
	min-width:100%;
	min-height:100%;
	transform:translate(-50%,-50%);}
.a2{
	position:absolute;
	height:560px;
	width:1100px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);}
.b1{
	width:420px;
	height:420px;
	float:left;
	border:15px solid #fff;
	border-radius:50%;
	background:url(../assets/imgs/imgdh/cd_img.jpg);
	}
.c1{
	width:100px;
	height:100px;
	border:10px solid #fff;
	border-radius:50%;
	background:#000 url(../assets/imgs/imgdh/yinfu.gif) center no-repeat;
	margin:150px auto;
	}
/* @font-face{
	font-family:md;
	src:url(../assets/imgs/imgdh/font/MD.ttf);
	} */
.b2{
	width:550px;
	height:450px;
	float:right;}
.b2 h1{
	height:100px;
	font-size:80px;
	line-height:100px;
	font-family:"华文行楷";
	color:#900;}
.b2 p{
	height:320px;
	font-size:14px;
	line-height:30px;
	margin-top:30px;
	background-image:linear-gradient(0deg,rgba(255,255,255,0.2),rgba(255,255,255,0.7));
	padding-left:20px;}
.b3{
	width:1100px;
  height:60px;
  margin-left: 60px;
	margin-top:490px;}
input{
	width:100px;
	height:50px;
	background:#FFC;}
/*绝对定位*/
.dingbu1{
	width:45px;
	height:50px;
	background:#F9DF79;
	position:fixed;
	top:10%;
	left:5%;
	border-radius:50px 50px 50px 50px;}
.dingbu1 p{
	font-family:"华文行楷";
	font-size:18px;
	margin:3px 4px;
	}
</style>
